<template>
    <view class="container">
        <u-navbar 
            :leftText="params.date + ' 流量明细'"
            @leftClick="goBack"
            leftIconColor="#1D2129"
            bgColor="transparent">
        </u-navbar>
		<view class="content">
			<view class="total_traffic">
				总流量：{{ resourceStream.totalStreamSize }}
			</view>
			<view class="type_traffic">
				<view class="left_traffic">
					<view class="type_name">直播流量：</view>
					<view class="type_value">{{ resourceStream.liveStreamSize }}</view>
				</view>
				<view class="right_traffic">
					<view class="type_name">点播流量：</view>
					<view class="type_value">{{ resourceStream.videoStreamSize }}</view>
				</view>
			</view>
			<view class="traffic_list">
				<scroll-view scroll-y class="content_scroll_view">
					<view class="item_list" v-for="(item, index) in trafficList" :key="index">
						<view class="item_top">
							<view class="item_time ex">{{ item.name }}</view>
							<view class="item_live">直播时长：{{ item.liveTime }}</view>
						</view>
						<view class="item_bottom">
							<text>直播流量 (GB)：{{ item.liveSize }}</text>
							<text>点播流量 (GB)：{{ item.videoSize }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
    </view>
</template>

<script>
export default {
	data () {
		return {
		  trafficList: [],
		  total: 0,
		  params: {
		  	page: 1,
		  	pageSize: 10,
		  	date: ''
		  },
		  resourceStream : {
			liveStreamSize: 0,
			totalStreamSize: 0,
			videoStreamSize: 0,
		  },
		}
	},
	onLoad() {
		this.params.date = this.$route.query.date
		this.getFlowConsumeDetails()
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.trafficList = []
		this.getTrafficConsumeList()
	},
    methods: {
        goBack() {
            uni.navigateBack();
        },
		// 滚动到底部加载更多
		scrolltolower(e) {
			if (this.trafficList.length < this.total) {
				this.params.page++
				this.getFlowConsumeDetails()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
		},
		getTimeHCM(item){
		  const { hours, minutes, seconds } = this.$utils.formatDuration(item)
		  return `${hours}:${minutes}:${seconds}`
		},
		async getFlowConsumeDetails() {
			const { data } = await this.$request(this.$Api.getFlowConsumeDetails, this.params, "get")
			this.resourceStream = {
				liveStreamSize: this.$utils.formatSizeSmall(data.data.liveStreamSize),
				totalStreamSize: this.$utils.formatSizeSmall(data.data.totalStreamSize),
				videoStreamSize: this.$utils.formatSizeSmall(data.data.videoStreamSize),
			}
			const list = data.data.list.map(item => {
				 item.liveTime = this.getTimeHCM(item.liveTime)
				 item.liveSize=(item.liveSize / (1000 * 1000 * 1000)).toFixed(2)
				 item.videoSize=(item.videoSize / (1000 * 1000 * 1000)).toFixed(2)
				 return item
			})
			this.trafficList = this.trafficList.concat(list)
			this.total = data.data.total
			uni.stopPullDownRefresh()
		},
    }
}
</script>

<style lang="scss" scoped>
.container {
   position: relative;
   height: 100vh;
   background: url('@/static/image/my_set_bg.png') no-repeat center center;
   background-size: cover;
   ::v-deep .u-navbar__content__left__text{
   	font-weight: 500;
   	font-size: 32rpx;
   }
   .content{
	    display: flex;
		flex-direction: column;
		margin-top: 96rpx;
		padding: 0 32rpx;
		height: calc(100vh - 96rpx);
		box-sizing: border-box;
		.total_traffic{
		   height: 34rpx;
		   line-height: 34rpx;
		   padding: 16rpx 0;
		   font-weight: 400;
		   font-size: 24rpx;
		   color: #295EFF;
		}
		.type_traffic{
			display: flex;
			justify-content: space-between;
			.left_traffic,
			.right_traffic{
				width: 332rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
				padding: 36rpx 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				background-size: cover !important;
				.type_name{
					font-size: 20rpx;
					color: #464C5B;
				}
				.type_value{
					font-weight: 600;
					font-size: 40rpx;
					color: #464C5B;
					margin-top: 16rpx;
					text-align: center;
				}
			}
			.left_traffic{
				background: url('@/static/image/left_bg.png') no-repeat center center;
			}
			.right_traffic{
				background: url('@/static/image/right_bg.png') no-repeat center center;
			}
		}
		.traffic_list{
			flex: 1;
			background-color: #FFFFFF;
			border-radius: 12rpx 12rpx 0 0;
			.content_scroll_view{
				height: calc(100vh - 340rpx);
				padding: 10rpx 0 30rpx 0;
				box-sizing: border-box;
				.item_list {
					padding: 30rpx 0;
					margin: 0 24rpx;
					border-bottom: 1rpx solid #E3E8EE;
					.item_top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;
						.item_time{
							width: 252rpx;
							font-weight: 600;
							font-size: 28rpx;
							color: #464C5B;
						}
						.item_live{
							font-weight: 400;
							font-size: 24rpx;
							color: #8C8C8C;
						}
					}
					.item_bottom{
						font-weight: 400;
						font-size: 24rpx;
						color: #657180;
						text{
							margin-right: 40rpx;
						}
					}
				}
		
			}
		}
   }
}
</style>

